<template>
	<view>
		<view class="container" v-if="applyState == -1">
			<view class="back_img"></view>
			<view class="list_container">
				<view class="form_container">
					<view class="form_item">
						<view class="label" :style="{width:identityFlag == 1 ? '30%' : '20%'}">
							<view class="tip">*</view>
							<text v-if="identityFlag == 1">公司</text>
							名称：
						</view>
						<view class="item_input" :style="{width:identityFlag == 1 ? '70%' : '80%'}">
							<u--input placeholder="请填写名称" border="none" v-model="formData.commpanyName"
								inputAlign="right" fontSize="12" @input="checkHandle()"
								placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
						</view>
						<view class="check_flag" v-if="!checkFlag">
							该名称已被占用
						</view>
					</view>
					<view class="form_item" v-if="identityFlag == 1">
						<view class="label" :style="{width:identityFlag == 1 ? '30%' : '20%'}">
							<view v-if="identityFlag == 1">公司</view>
							<view>地址：</view>
						</view>
						<view class="item_input" :style="{width:identityFlag == 1 ? '70%' : '80%'}">
							<u--input placeholder="请填写地址" border="none" v-model="formData.commpanyAddress"
								inputAlign="right" fontSize="12"
								placeholder-style="text-align: right;color: rgb(167, 167, 167);font-size: 24rpx;"></u--input>
						</view>
					</view>
					<view class="logo_container">
						<view class="logo_item">
							<view class="logo_label" :style="{width:identityFlag == 1 ? '30%' : '20%'}">
								<text v-if="identityFlag == 1">公司</text>
								<view>logo：</view>
							</view>
							<view class="logo_fill" :style="{width:identityFlag == 1 ? '70%' : '80%'}"></view>
						</view>
						<view class="logo_img">
							<image mode="widthFix" :src="formData.commpanyImg" v-if="formData.commpanyImg" />
							<view class="empty_img" @click="select" v-else>
								<u-icon name="plus" color="#f1f1f1" size="80"></u-icon>
							</view>
							<view class="tip">
								默认使用鹏城测试logo
							</view>
						</view>
						<view class="logo_btn" @click="select">更换图片</view>
					</view>
				</view>

				<view class="toggle_btn" v-if="identityFlag == 1" @click="identityChange(2)">
					个人身份申请>>
				</view>
				<view class="toggle_btn" v-if="identityFlag == 2" @click="identityChange(1)">
					公司身份申请>>
				</view>
			</view>
			<view class="apply_btn_container" @click="applyHandle()">
				立即申请
			</view>
		</view>
		<view class="container wait" v-if="applyState == 0">
			<view class="back_img"></view>
			<view class="wait_container">
				<view class="text">
					您的申请正在审核中，请耐心等待
				</view>
				<view class="img">
					<image style="width: 400rpx;height: 500rpx;"
						src="http://applet.atptest.com/JrnhameO1722667947646.png?v=1722667947975"></image>
				</view>
			</view>
		</view>
		<view class="container wait" v-if="applyState == 2">
			<view class="back_img"></view>
			<view class="wait_container">
				<view class="text">
					您的申请未审核通过，未通过原因：<text style="color: red;">{{applyForm.remark}}</text>
				</view>
				<view class="img">
					<image style="width: 400rpx;height: 300rpx;"
						src="http://applet.atptest.com/Aw27f22z1722671154747.png?v=1722671155125"></image>
				</view>
				<view class="again_apply" @click="againApply()">
					重新申请
				</view>
			</view>
		</view>

		<!-- 图片裁剪组件 -->
		<ksp-cropper mode="fixed" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024" :url="path"
			@cancel="oncancel" @ok="onok"></ksp-cropper>
	</view>

</template>

<script>
	import {
		addAgentExamine,
		getAgentExamineState,
		CheckAgentName
	} from "../../../api/agent.js"
	export default {
		data() {
			return {
				formData: {
					commpanyName: "",
					commpanyImg: "http://applet.atptest.com/gTbSE31p1719307785927.png?v=1719307786373",
					commpanyAddress: ""
				},
				path: "",
				applyState: null,
				applyForm: {
					remark: ""
				},
				checkFlag: true,
				identityFlag: 2
			}
		},
		onShow() {
			this.getAgentExamineState()
		},
		methods: {
			//审核状态
			async getAgentExamineState() {
				const res = await getAgentExamineState()
				if (res) {
					this.applyForm = res
					this.applyState = res.eState
				} else {
					this.applyState = -1
				}
				this.applyState = -1
			},

			//类型切换
			identityChange(val) {
				this.identityFlag = val
				this.formData.commpanyName = ""
				this.formData.commpanyAddress = ""
				this.checkFlag = true
			},

			//检查分销名称
			async checkHandle() {
				const res = await CheckAgentName({
					name: this.formData.commpanyName
				})
				if (res.code == 400) {
					this.checkFlag = false
				} else {
					this.checkFlag = true
				}
			},

			select() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 设置path的值，显示控件
						this.path = res.tempFilePaths[0];
					}
				});
			},
			onok(e) {
				this.path = "";
				this.uploadFiles(e.path)
			},
			oncancel() {
				this.path = "";
				this.applyState = -1
			},

			// 上传图片到服务器
			uploadFiles(tempFilePath) {
				const _that = this
				return new Promise((resolve) => {
					uni.showLoading({
						title: "上传中..."
					})
					uni.uploadFile({
						url: 'https://wechat.atptest.com:44387/api/PCApplet/UploadLargeFileOBS',
						filePath: tempFilePath,
						name: 'file',
						success(res) {
							uni.hideLoading()
							resolve()
							let json_data = JSON.parse(res.data)
							// 上传失败
							if (json_data['errCode'] == 0) {
								return uni.showToast({
									title: json_data['error_message'],
									icon: 'none',
									duration: 2000
								});
							}
							// 上传成功
							_that.formData.commpanyImg = json_data.data
							_that.applyState = -1
						},
						fail() {
							_that.applyState = -1
						}
					})
				})
			},


			//立即申请
			async applyHandle() {
				if (this.formData.commpanyName == "") {
					return uni.showToast({
						title: "名称不能为空",
						icon: 'none',
						duration: 2000
					});
				}
				if (!this.checkFlag) {
					return uni.showToast({
						title: "该名称已被占用",
						icon: 'none',
						duration: 2000
					});
				}
				this.subscribe()
			},

			//判断订阅开关
			subscribe() {
				const that = this
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						if (!res.subscriptionsSetting.mainSwitch) {
							uni.showModal({
								title: '提示',
								content: '为了及时获取审核状态，您是否想接收审核状态的消息提醒？',
								success: function(res) {
									if (res.confirm) {
										// 订阅消息的总开关,如果是关着的，引导用户去打开
										that.openMessage()
									} else if (res.cancel) {
										// 提交申请
										that.applyConfirm();
									}
								}
							});
						} else {
							// 如果开着，则继续向下打开弹窗，获取用户授权
							that.message()
						}
					},
					fail() {
						// 如果失败，也打开弹窗，获取用户授权
						that.message()
					}
				})
			},

			// 调用通知
			message() {
				const that = this
				uni.requestSubscribeMessage({
					//此处填写申请模板的模板ID
					tmplIds: ['FZm7ms5kytwOk5F54xwvYi9D7jDuTSEGVetbuaJxwas',
						'bR_7HpIRQbK_ycOhz8c88mHSBYosw2bYvIIjht_IKlE'
					],
					success(res) {
						that.applyConfirm()
					},
					fail(res) {
						console.log("调用通知失败", res);
					}
				})
			},

			// 引导用户开启订阅
			openMessage() {
				const that = this
				uni.openSetting({
					withSubscriptions: true,
					complete: (res) => {
						// 提交申请
						that.applyConfirm();
					}
				})
			},

			//提交申请
			async applyConfirm() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				})
				const res = await addAgentExamine(this.formData)
				uni.hideLoading()
				if (res) {
					uni.showToast({
						title: "操作成功",
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						this.applyState = 0
					}, 500)
				}
			},

			//重新申请
			againApply() {
				this.applyState = -1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 90rpx 50rpx 150rpx 50rpx;
		box-sizing: border-box;
		position: relative;

		.back_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 260rpx;
			background-image: url("http://applet.atptest.com/uFA3XGtb1721639471090.png?v=1721639471638");
			background-repeat: no-repeat;
			background-position: 50% 100%;
			background-size: 150%;
			z-index: -1;
		}

		.list_container {
			width: 100%;
			background: rgb(255, 255, 255);
			box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.25);
			padding-bottom: 80rpx;
			box-sizing: border-box;

			.form_container {
				width: 100%;
				background: rgb(255, 255, 255);
				border-radius: 8rpx;
				margin: 0 auto;
				padding-top: 40rpx;
				box-sizing: border-box;

				.form_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 40rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					position: relative;

					.label {
						color: rgb(61, 61, 61);
						font-family: 思源黑体;
						font-size: 28rpx;
						font-weight: 400;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						position: relative;

						.tip {
							position: absolute;
							color: red;
							top: 6rpx;
							left: 10rpx;
						}
					}

					.check_flag {
						position: absolute;
						color: red;
						font-size: 20rpx;
						bottom: 0;
						right: 40rpx;
					}

					.item_input {
						margin-left: 20rpx;

						.form_select {
							color: rgb(167, 167, 167);
							font-family: 思源黑体;
							font-size: 24rpx;
							font-weight: 400;
							text-align: right;
						}

						/deep/ .u-textarea {
							padding: 9px 0px !important;
							box-sizing: border-box;
						}

						/deep/ .u-textarea__field {
							font-size: 24rpx;
							text-align: right;

						}
					}
				}

				.logo_container {
					width: 100%;
					margin-top: 10rpx;
					padding: 20rpx 40rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.logo_item {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.logo_label {
							color: rgb(61, 61, 61);
							font-family: 思源黑体;
							font-size: 28rpx;
							font-weight: 400;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.logo_fill {
							margin-left: 20rpx;
						}
					}



					.logo_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 140rpx;
						font-size: 26rpx;
						border-radius: 10rpx;
						padding: 10rpx 10rpx;
						box-sizing: border-box;
						color: #fff;
						background-color: #3e56ba;
						margin: 10rpx auto 0 auto;
					}

					.logo_img {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
						padding: 20rpx 0;
						box-sizing: border-box;

						image {
							width: 400rpx;
							height: 400rpx;
							border-radius: 50%;
							border: 1px solid #94a7f8;
						}

						.empty_img {
							width: 400rpx;
							height: 400rpx;
							border-radius: 50%;
							border: 1px solid #ddd;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.tip {
							font-size: 24rpx;
							color: #c0c4cc;
							margin-top: 10rpx;
						}
					}
				}
			}

			.toggle_btn {
				width: 300rpx;
				display: flex;
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #aaa;
				margin-left: 20rpx;
			}
		}

		.apply_btn_container {
			width: 706rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			margin: 0 auto;
			color: rgb(255, 255, 255);
			font-size: 40rpx;
			background: rgb(62, 86, 186);
			border-radius: 54rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 30rpx;
			z-index: 999;
		}

		.wait_container {
			width: 90%;
			height: 950rpx;
			background: #f7f7f7;
			background-color: #fff;
			box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.25);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 40rpx;

			.text {
				width: 90%;
				font-size: 36rpx;
				line-height: 50rpx;
			}

			.img {
				margin-top: 40rpx;
			}

			.again_apply {
				width: 40%;
				padding: 20rpx 0;
				box-sizing: border-box;
				background: rgb(62, 86, 186);
				border-radius: 54rpx;
				color: #fff;
				text-align: center;
				margin-top: 40rpx;
			}
		}
	}
</style>